<template>
  <div class="h5-app-container content-main-container">
    <div class="content-main-wrap scrollbar-no-width">
      <div class="title-info">
        <div v-if="contentRecord.isTop===1" class="tag-top">置顶</div>
        <div class="title">{{ contentRecord.title }}</div>
      </div>
      <div class="desc-info">
        <div class="desc-item">作者：{{ contentRecord.author }}</div>
        <div class="desc-item">发布时间：{{ contentRecord.gmtCreated | formatDate('yyyy-MM-dd hh:mm') }}</div>
      </div>
      <div class="content-content-warp " v-html="contentRecord.contentBody" />
      <div class="content-content-desc">
        <div v-if="contentRecord.isOriginal===0" class="desc-item">
          <i class="el-icon-price-tag" />摘抄自：{{ contentRecord.extractFrom }}
        </div>
        <div v-if="contentRecord.contentFiles.length>0" class="desc-item" style="flex-direction:column">
          <div style="margin-bottom: 10px"><i class="el-icon-link" />附件：</div>
          <div>
            <FileItem :files="contentRecord.contentFiles" style="margin-top:0px !important;" @remove="false" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      contentRecord: {
        contentFiles: []
      }
    }
  },
  computed: {
  },
  created() {
    this.fetchData()
  },
  methods: {
    async fetchData() {
      this.contentRecord = await this.$store.dispatch('thirdWechatArticleGetDetailsById', this.$route.params.id)
      this.contentRecord = {
        ...this.contentRecord,
        contentFiles: this.contentRecord.attachment ? this.contentRecord.attachment.split(',') : []
      }
    }
  }
}
</script>
<style scoped lang="scss">
  .content-main-container{
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 0 15px;
    .content-main-wrap{
      width: 100%;
      height: 100%;
      margin: 0 auto;
      background-color: #ffffff;
      font-size: 13px;
      color: #737373;
      overflow: auto;
      .category-info{
        color: #999999;
        margin: 20px 0 8px 0;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
      }
      .title-info{
        display: flex;
        flex-direction: row;
        margin-bottom: 15px;
        margin-top: 15px;
        .tag-top{
          width: 50px;
          height: 27px;
          background: #e5352b;
          border-radius: 2px;
          text-align: center;
          line-height: 27px;
          color: #ffffff;
          font-size: 14px;
          margin-top: 8px;
          margin-right: 10px;
        }
        .title{
          font-size: 22px;
          color: #333333;
          font-weight: bold;
        }
      }
      .desc-info{
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        border-bottom: 1px solid #e5e6eb;
        padding-bottom: 16px;
      }
      .content-content-warp{
        padding: 11px;
        color: #4A4A4A;
        ::v-deep img{
          width: 100%;
        }
      }
      .content-content-desc{
        padding: 11px;
        margin-bottom: 100px;
        .desc-item{
          font-size: 13px;
          color: #525252;
          margin-bottom: 12px;
          display: flex;
          flex-direction: row;
          align-items: baseline;
          i{
            margin-right: 5px;
          }
        }
      }
    }
    .content-footer{
      height: 70px;
      background: #fff;
      border-top: 1px solid #e5e6eb;
      .content-footer-wrap{
        width: 850px;
        margin: 0 auto;
        display: flex;
        flex-direction: row;
        padding-top: 18.6px;
        justify-content: space-between;
        .left{
          display: flex;
          flex-direction: row;
        }
        .number{
          line-height: 33px;
          padding: 0 25px;
        }
        .right{
        }
      }
    }
  }
</style>
